import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Text,
  Image,
   FlatList,
  Dimensions,
  TouchableOpacity,
} from 'react-native';

import Listin from './listin'

const { width, height } = Dimensions.get('window');

const leftwidth=width/5
const rightwidth=width*4/5
const imgwidth=width*4/25
const rightwidth1=width*16/25

import Change from './change'


var styles=StyleSheet.create({
 
   
   
    changewarp:{
        width:100,
        padding:10,
        flexDirection:'row',
        justifyContent:'space-around',
        alignItems:'center'
    },
  
  
  
   single:{
        width:'100%',
    },
   
   types1:{
        backgroundColor:'white',
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between',
        height:imgwidth+30
    },
    singleimg:{
        width:imgwidth,
        paddingTop:'20%',
    },
    singleright:{
        width:rightwidth1,
        height:imgwidth+20,
        flexDirection:'column',
        alignItems:'center',
        justifyContent:'space-around',
    },
    chosetype:{
        backgroundColor:'#1296db',
        color:'white',
        borderRadius:10,
        padding:3
    },
    single:{
        width:'100%',
    },
    changewarp:{
      width:'100%',
      flexDirection:'row',
      justifyContent:'space-around',
      alignItems:'center'
    },
   
    
   
    
   
   types:{
     width:'100%',
     height:70,
     flexDirection:'column',
     justifyContent:'center',
     backgroundColor:'white'
   },
   typetext:{
     textAlign:'center',
   }
})


export default class Rightlist extends Component {
    constructor(props) {
    super(props);
   
    }

shouldComponentUpdate(nextProps, nextState) {
    if(nextProps.changedid==this.props.data.index){
        return true
    }
   else
    return false;
  }

    render(){

        return (
        <FlatList
                  data={this.props.data.item.list}
                  style={styles.single}
                   keyExtractor={(item1, index2) => index2}
                   ItemSeparatorComponent={()=>{
                                return(
                                <View style={{width:'100%',height:1,backgroundColor:'gray'}}>
                                </View>
                                )
                                }
                         }
                  renderItem={
                    (item) => { 
                        return (
                        <Listin changeinid={this.props.changeinid} index={item.index} showspecif={()=>{
                            this.props.showspecif(item.item)
                        }} item={item}/>
                    )
                }
              }    
                  />
                  )
    }
}